<template>
  <el-input class="input-color" :placeholder="placeholder" clearable v-model="formValue">
    <el-color-picker
      v-model="formValue"
      slot="append"
      :show-alpha="showAlpha"
      :predefine="predefineColors"
    />
  </el-input>
</template>

<script>
/**
 * 输入框颜色选择器
 * ps：预定义颜色中，如果颜色不对，将无法选中
 *
 * @showAlpha 是否支持透明度 默认false
 * @predefineColors 预定义颜色
 * @value 默认颜色编码 示例：#ffffff
 * @placeholder 输入框提示文字
 */
export default {
  name: "InputColor",
  props: {
    value: {
      type: String,
      default: "",
    },
    showAlpha: { type: Boolean, default: false },
    predefineColors: {
      type: Array,
      default: () => {
        return [
          "#ff4500",
          "#ff8c00",
          "#ffd700",
          "#90ee90",
          "#00ced1",
          "#1e90ff",
          "#c71585",
          "#FF0000",
        ];
      },
    },
    placeholder: { type: String, default: "请输入颜色" },
  },

  computed: {
    formValue: {
      get() {
        return this.value;
      },
      set(val) {
        this.$emit("input", val);
      },
    },
  },
};
</script>

<style lang="scss" >
.input-color {
  .el-input-group__append {
    position: relative;
    padding: 0;
    .el-color-picker {
      position: absolute;
      inset: 0;
      height: auto;
      width: auto;
      .el-color-picker__trigger {
        width: 100%;
        height: 100%;
        border: none;
      }
    }
  }
  &.el-input--mini {
    .el-input-group__append {
      width: 28px;
    }
  }
  &.el-input--medium {
    .el-input-group__append {
      width: 36px;
    }
  }
  &.el-input--small {
    .el-input-group__append {
      width: 32px;
    }
  }
}
$box-width: 100px;
.public-input-color-picker {
  // display: flex;
  // -webkit-box-align: center;
  // -webkit-align-items: center;
  // align-items: center;
  position: relative;
  width: $box-width;
  .el-input {
    width: $box-width;
  }
  .el-color-picker {
    position: absolute;
    right: 0;
    .el-color-picker__trigger {
      border: 0;
    }
  }
}
</style>